
<template>
  <div class="page-wraper">
    <!-- 使用Suspense包装异步组件，支持SSR -->
    <Suspense>
      <template #default>
        <Component :is="AshanComponent" :page-type="pageType" :base-page-code="basePageCode" />
      </template>
      <template #fallback>
        <div class="loading">
          <p>正在加载组件...</p>
        </div>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, type AsyncComponentLoader } from "vue";
const appConfig = useAppConfig();
const { siteInfo } = appConfig.systemConfig;
const pageType = "page"; // 页面类型，判断是数据是预览还是正式 list page detail
const basePageCode = "MENU_MFP3AHB5_1ACJP3"; // 基础页面code
const curComponent = "AboutUs.vue";

/**
 * 创建异步组件加载器
 * @param template 主题模板名称
 * @returns AsyncComponentLoader 异步组件加载器
 */
const createAsyncComponentLoader = (template: string): AsyncComponentLoader => {
  return () => {
    const modules = import.meta.glob("@/templates/**/*.vue");
    const modulePath = "/templates/" + template + "/" + curComponent;
    const moduleLoader = modules[modulePath];
    if (moduleLoader) {
      return moduleLoader();
    }
    return import("@/templates/empty.vue");
  };
};

/**
 * 根据模板创建异步组件
 * @param template 主题模板名称
 * @returns 异步组件实例
 */
const createAshanComponent = (template: string) => {
  return defineAsyncComponent({
    loader: createAsyncComponentLoader(template),
    delay: 200,
    timeout: 3000,
    errorComponent: {
      template: '<div class="error">加载失败</div>'
    },
    loadingComponent: {
      template: '<div class="loading"><p>正在加载...</p></div>'
    }
  });
};

// 响应式的异步组件
const AshanComponent = computed(() => {
  const template = siteInfo.siteTemplate || "default";
  return createAshanComponent(template);
});

// 预加载组件以提升性能
onMounted(() => {
  const template = siteInfo.siteTemplate || "default";
  createAsyncComponentLoader(template)();
});
</script>

<style scoped lang="scss"></style>

